<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>

    <a-card :bordered="false">
      <template>
        <div v-loading="loading">
          <a-form-model
            ref="coordinateForm"
            :rules="rules"
            :model="info"
            :labelCol="{ span: 6 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-form-model-item label="配送方式">
              <a-row :gutter="[16, 30]" type="flex" align="middle">
                <a-col :span="20">
                  <a-radio-group v-model="type">
                    <a-radio :value="1"> 顺丰 </a-radio>
                    <a-radio :value="2"> 达达 </a-radio>
                    <a-radio :value="3"> 闪送 </a-radio>
                    <a-radio :value="4"> 美团 </a-radio>
                    <a-radio :value="5"> UU </a-radio>
                  </a-radio-group>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item label="配送AppKey" prop="delivery_shop_id">
              <a-input v-model="config.delivery_shop_id" />
            </a-form-model-item>
            <a-form-model-item label="配送AppSecret" prop="delivery_app_secret">
              <a-input v-model="config.delivery_app_secret" />
            </a-form-model-item>
            <a-form-model-item label="商家门店编号" prop="delivery_shop_no">
              <a-input v-model="config.delivery_shop_no" />
            </a-form-model-item>
            <a-form-model-item label="微信推送消息Token" prop="wechat_msg_token">
              <a-input v-model="info.wechat_msg_token" />
            </a-form-model-item>
            <a-form-model-item label="品目选择">
              <a-select v-model="category_one" style="width: 30%" @change="e => handleChange(e)">
                <a-select-option v-for="(item, key) of category_level_one" :value="key" :key="key">
                  {{ item }}
                </a-select-option>
              </a-select>
              <a-select v-model="category_two" style="width: 30%">
                <a-select-option v-for="(item, key) of category_level_two" :value="key" :key="key">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
              <a-button :loading="btnLoading" type="primary" @click="submitForm">
                保存
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </template>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import storage from 'store'
import { getDeliveryInfo, setDeliveryInfo } from '@/api/store'

export default {
  name: 'SettingOther',
  data() {
    return {
      type: 1,
      category_one: '',
      category_two: '',
      store_id: 0,
      loading: false,
      btnLoading: false,
      category_list: [],
      category_level_one: [],
      category_level_two: [],
      info: {
        wechat_msg_token: ''
      },
      config: {
        delivery_shop_id: '',
        delivery_app_secret: '',
        delivery_shop_no: ''
      },
      data: {}
    }
  },
  created() {
    this.getData()
  },
  watch: {
    category_one(val) {
      this.category_level_two = this.category_list[val]
    },
    type(type) {
      this.handleData(type, this.data)
    }
  },
  methods: {
    handleChange(e) {
      this.category_level_two = this.category_list[e]
      this.category_two = Object.keys(this.category_list[e])[0]
    },
    getData: function() {
      this.store_id = storage.get('storeId')
      this.loading = true
      getDeliveryInfo({ store_id: this.store_id })
        .then(res => {
          if (res.code == 0) {
            // if (res.data.is_jump) {
            //   this.$error({
            //     title: '当前未添加小程序！',
            //     onOk: () => {
            //       this.$router.push({
            //         path: '/setting/appletManagement/wechat'
            //       })
            //     }
            //   })
            //   return
            // }

            this.$nextTick(() => {
              this.info = res.data
              this.data = res.data.config
              this.type = res.data.type
              this.handleData(this.type, res.data.config)
              this.category_list = res.data.category_level_list
              this.category_level_one = res.data.category_level_one
              this.category_two = res.data.category_two
              this.category_one = res.data.category_one
              this.category_level_two = this.category_list[this.category_one]

              // let reslist = res.data.category_level_one
              // let keys = Object.keys(reslist)
              // let arrvals = Object.values(reslist)
              // let arr = [];
              // keys.forEach((d,index)=>{
              //   let obj = {
              //     key: d,
              //     value: arrvals[index]
              //   };
              //   arr.push(obj)
              // })
              // console.log(arr)
              // this.category_level_one = arr;
            })
          } else {
            this.loading = false
          }
        })
        .catch(error => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    handleData(type, data) {
      if (type == 1) {
        this.config.delivery_shop_id = data.sf.sf_app_key
        this.config.delivery_app_secret = data.sf.sf_app_secret
        this.config.delivery_shop_no = data.sf.sf_shop_no
      }
      if (type == 2) {
        console.log(data)
        this.config.delivery_shop_id = data.dd.dd_app_key
        this.config.delivery_app_secret = data.dd.dd_app_secret
        this.config.delivery_shop_no = data.dd.dd_shop_no
      }
      if (type == 3) {
        this.config.delivery_shop_id = data.ss.ss_app_key
        this.config.delivery_app_secret = data.ss.ss_app_secret
        this.config.delivery_shop_no = data.ss.ss_shop_no
      }
      if (type == 4) {
        this.config.delivery_shop_id = data.mt.mt_app_key
        this.config.delivery_app_secret = data.mt.mt_app_secret
        this.config.delivery_shop_no = data.mt.mt_shop_no
      }
      if (type == 5) {
        this.config.delivery_shop_id = data.uu.uu_app_key
        this.config.delivery_app_secret = data.uu.uu_app_secret
        this.config.delivery_shop_no = data.uu.uu_shop_no
      }
    },
    submitForm: function() {
      this.store_id = storage.get('storeId')
      if (!this.category_one || !this.category_two) {
        this.$message.warning('品目选择不能为空')
        return
      }
      this.$refs.coordinateForm.validate(valid => {
        if (valid) {
          this.btnLoading = true
          delete this.info.category_level_one
          delete this.info.category_level_list
          delete this.info.config
          setDeliveryInfo({
            ...this.info,
            ...this.config,
            type: this.type,
            store_id: this.store_id,
            category_one: this.category_one,
            category_two: this.category_two
          })
            .then(res => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch(error => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    }
  }
}
</script>

<style scoped></style>
